import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'

import more from '@assets/images/more.png'
import myVideo from '@assets/images/video.png'

import './index.scss'

class SingItem extends Component {
  constructor(props) {
    super(props)
    this.state = {}
  }

  // 调用父组件方法，向父组件传递数据
  handleMore () {
    this.props.onMore(this.props.singInfo)
  }

  handleSong (id) {
    Taro.navigateTo({
      url: '/pages/now-playing/index?id=' + id
    })
  }

  // 相关视频
  relatedVideo (id) {
    Taro.navigateTo({
      url: '/pages/relation-video/index?id=' + id
    })
  }

  render() { 
    return (
      <View className='sing'>
        <View className='at-row at-row__align--center'>
          <View className='at-col at-col-8' onClick={this.handleSong.bind(this, this.props.singInfo.id)}>
            <View className='sing-name'>
              {this.props.singInfo.name}
            </View>
            <View className='sing-info'>
              <Text className='decorate' style={{display: this.props.singInfo.fee >= 1 ? 'inline' : 'none'}}>VIP</Text>
              <Text className='decorate' style={{display: this.props.singInfo.mark > 0 ? 'inline' : 'none'}}>试听</Text>
              <Text className='decorate' style={{display: this.props.singInfo.copyrightId > 0 ? 'inline' : 'none'}}>独家</Text>
              <Text className='decorate' style={{display: this.props.singInfo.status === 0 ? 'inline' : 'none'}}>SQ</Text>
              <Text className='band'>{this.props.singInfo.artists[0].name}</Text>
              <Text> - </Text>
              <Text className='singer'>{this.props.singInfo.album.name}</Text>
            </View>
          </View>
          <View className='at-col at-col-1 at-col__offset-2' onClick={this.relatedVideo.bind(this, this.props.singInfo.id)}>
            <Image src={myVideo} className='sing-icon__video' />
          </View>
          <View className='at-col at-col-1' onClick={this.handleMore.bind(this)}>
            <Image src={more} className='sing-icon__more' />
          </View>
        </View>
      </View>
    )
  }
}

SingItem.defaultProps = {
  singInfo: {}
}
 
export default SingItem